<template>
	<view>
		<z-paging ref='paging' v-model="list" @query="getList">
			<view class="px-20 py-10 flex flex-y-center grid-gap-10" v-for="(item,index) in list" :key='index'>
				<view class="flex grid-gap-10 flex-y-center flex-1">
					<image class="w-60 h-60 round-8 img_flex" :src="item.image"></image>
					<view class="flex flex-column grid-gap-4">
						<text class="text-333">{{item.name}}</text>
						<text class="text-999">{{item.desc}}</text>
					</view>
				</view>
				<view>
					<view class="px-12 py-6 round-30 text-green border-green fs-14" @click="popup=true;code=item.code">
						加好友</view>
				</view>
			</view>
		</z-paging>
		<y-popup v-if='popup' round='14rpx' @close="popup=false">
			<view class="bg-white text-center flex flex-column grid-gap-12 p-20">
				<text class="fs-17">人脉群主</text>
				<image :src='code' class="w-200 h-200 img_flex" show-menu-by-longpress></image>
				<!-- #ifdef MP-WEIXIN -->
				<text class="text-999">长按保存</text>
				<!-- #endif -->
			</view>
		</y-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { $http } from '@/utils'
	const paging = ref()
	const popup=ref(false)
	const list = ref([])
	const code = ref('')
	const getList = (page, limit) => {
		$http.get('Connections/getList', { page: page, limit: 15 }).then(res => {
			paging.value.complete(res.data)
		})
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.text-green {
		color: #18af78;
	}

	.border-green {
		border: 2rpx solid #18af78;
	}
</style>